滚动条操作

[页面滚动时自动显示隐藏导航效果]

参考：
页面滚动时自动显示隐藏导航效果
 页面滚动时自动显示隐藏导航效果（jQuery）
$_PS: 第二个原文章。已下载.html

## 下拉刷新（移动端）

# [滑向未来（现代 JS 与 CSS 滚动实现指南）]

消逝的滚动条

隐藏但可滚动

### body{overflow:hidden}“模态框抖动”问题
在Mac 系统中，无论任何浏览器（滚动条）都是统一15px，然而 Windows 系统可会令开发者发狂：
o:15px,edge:16,chrome/ff/ie:17
#### css
至于 Firefox，很不幸，没有任何办法隐藏滚动条。

.container::-webkit-scrollbar {
  display: none;
}
.container {
  -ms-overflow-style: none;
}

外观争议

流畅的操作体验

轮子
js:elem.scrollIntoView({behavior: 'smooth'});
css(草案):html{scroll-behavior: smooth;}

粘性 CSS

position: sticky

全面使用函数节流

在视窗中显示

const rect = elem.getBoundingClientRect();
const observer = new IntersectionObserver(callback, options);

滚动边界问题

触屏之后

# [无尽滚动的复杂度]
我们将会使用3种技术来达成目标：DOM回收、墓碑和滚动锚定

自定义滚动条

参考：
[自定义滚动条]

无滚动条但依然可以滚动

美化后的滚动条
只有webkit内核的浏览器（chrome, opera, safari等）才支持，
firefox到目前位置还不支持滚动条美化，
IE浏览器只支持修改滚动条的颜色，其他的则无法修改。

/* 设置垂直滚动条的宽度和水平滚动条的高度 */
.demo::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}

/* 设置滚动条的滑轨 */
.demo::-webkit-scrollbar-track {
      background-color: #ddd;
}

/* 滑块 */
.demo::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
}

 /* 滑轨两头的监听按钮 */
.demo::-webkit-scrollbar-button {
    background-color: #888;
    display: none;
}

/* 横向滚动条和纵向滚动条相交处尖角 */
.demo::-webkit-scrollbar-corner {
    /*background-color: black;*/
}
// ie
scrollbar-arrow-color: color; //三角箭头的颜色/
scrollbar-face-color: color; //立体滚动条的颜色（包括箭头部分的背景色）/
scrollbar-3dlight-color: color; //立体滚动条亮边的颜色/
scrollbar-highlight-color: color; //滚动条的高亮颜色（左阴影？）/
scrollbar-shadow-color: color; //立体滚动条阴影的颜色/
scrollbar-darkshadow-color: color; //立体滚动条外阴影的颜色/
scrollbar-track-color: color; //立体滚动条背景颜色/
scrollbar-base-color:color; //滚动条的基色/

自定义滚动条
自定义滚动条借助js里的滚轮事件，mousemove事件等，使用div来模拟一个滚动条，然后根据位移，滚动条和内容移动相应的距离
使用mCustomScrollbar

其它：
完美的自定义滚动条
为何称之为完美呢？只因其具有以下优点：

兼容所有浏览器。
支持所有鼠标事件，包括长按。
样式可以完全自定义。
使用该组件无需改动原来的任何代码，也不要求原来的元素使用什么定位方式。
只需引进一两个js文件，再添加一句代码即可

判断方向

# croll时判断向下滚动还是向上滚动

$(document).ready(function(){  
    var p=0,t=0;  
    $(window).scroll(function(e){  
            p = $(this).scrollTop();  
            if(t<=p){//下滚  
                .......  
            }  
            else{//上滚  
                .......  
            }  
            setTimeout(function(){t = p;},0);         
    });  
});

是否滚动到底

# [jquery判断页面滚动条(scroll)是上滚还是下滚，且是否滚动到头部或者底部]

## 项目背景
webtouch（webapp）页面，防苹果手机safari浏览器，网上滑动，底部导航消失，滑动到底部又出现。向下滑动，底部导航出现。
$_PS: 和/mobile 项目有点类似

## 遇到问题
1、我一开始用swipeup和swipedown来做，发现因为有滚动条，不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势，后面的文章会介绍，欢迎关注！
2、通过上滚下滚来让底部导航显示或者因此，安卓上面的浏览器都可以，但是苹果safari会一闪一闪，原因是苹果safari自动有个弹跳效果，导致事件重复执行，解决办法是给上滚下滚一个距离，滚动到一定距离后返回是上滚还是下滚。

## 单纯判断滚动条方向
以上方法手机苹果浏览器事件会跳动，解决方法及代码改进
滚动条滚动到底部和头部判断

BottomJumpPage: function () {
    var scrollTop = $(this).scrollTop();
    var scrollHeight = $(document).height();
    var windowHeight = $(this).height();
    if (scrollTop + windowHeight == scrollHeight) {  //滚动到底部执行事件
            console.dir("我到底部了")；
    }
    if (scrollTop == 0) {  //滚动到头部部执行事件
        console.dir("我到头部了")；
    }
}

## 判断div是否滚动到底部

 $(document).ready(function (){
    var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
    var nScrollTop = 0;   //滚动到的当前位置
    var nDivHight = $("#div1").height();
    $("#div1").scroll(function(){
        nScrollHight = $(this)[0].scrollHeight;
        nScrollTop = $(this)[0].scrollTop;
        if(nScrollTop + nDivHight >= nScrollHight)
        alert("滚动条到底部了");
    });
});

# 原生js——获取滚动条的高度

浏览器获取滚动条高度的方法

浏览器 API
IE6/7/8 document.documentElement.scrollTop
IE9及以上 window.pageYOffset 或者 document.documentElement.scrollTop
Safari window.pageYOffset或者document.body.scrollTop
Firefox window.pageYOffset 或者 document.documentElement.scrollTop
Chrome document.documentElement.scrollTop

## 备注

很多技术博客上面说Chrome只能使用document.body.scrollTop来获取滚动条的高度。
但是我在测试的时候发现，Chrome不能使用document.body.scrollTop，只能使用document.documentElement.scrollTop来获取滚动条的高度。
如果使用document.body.scrollTop，那么所获得的数值始终是0。
不过大家不用国语在意这一点，我们直接封装一个函数来获取滚动条的高度即可。

## 封装获取滚动条高度的函数

function getScrollTop() {
    var scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
        scroll_top = document.documentElement.scrollTop;
    }
    else if (document.body) {
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}

# [判断滚动条到底部的JS代码]

//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}

//文档的总高度
function getScrollHeight(){
　　var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
　　if(document.body){
　　　　bodyScrollHeight = document.body.scrollHeight;
　　}
　　if(document.documentElement){
　　　　documentScrollHeight = document.documentElement.scrollHeight;
　　}
　　scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
　　return scrollHeight;
}

//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

window.onscroll = function(){
　　if(getScrollTop() + getWindowHeight() == getScrollHeight()){
　　　　alert("you are in the bottom!");
　　}
};

## mobile/common.php:is_scrolled_bottom 函数

自动滚动到底部

# [到最底部 - 4种方法]
方法一：
使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置
方法二：
利用DIV的scrollIntoView方法，将最底端滚动到可视位置
方法三：
scrollTop
方法4：
这个比较复杂也比较灵活一点，就是利用DIV+JS+图片构造一个滚动条，当然了图片是怎么好看怎么用了。
主要部分就是外层的DIV加个overflow:hidden属性，通过js代码调整内层DIV的margin-left和margin-top来控制内容的滚动，由于上面两种方法已经可以满足需求，所以这种方法没具体做深究，有兴趣的可以试一下

其它：
实现一个自定义滚动条
 javascript自定义滚动条插件，几行代码的事儿
 【JQuery】HTML自定义滚动条（mCustomScrollbar）
JS实现的页面自定义滚动条效果

禁止滚动

参考：
jquery 禁止滚动条滚动，并且滚动条不消失，页面大小不变
 JavaScript如何屏蔽页面的滚动？

阻止所有能导致页面滚动的事件。 //scroll不能阻止，只能阻止mousewheel，鼠标拽滚动条就悲剧了
body overflow:hidden //win下右侧滚动条会消失导致页面横移，移动端阻止不了
把滚动部分单独放在一个div里，和弹出部分同级，body和window同高。 //所有涉及offset/scrollTop的方法都要修改。fix并且width100%的元素(比如微博顶栏)会压在内容区滚动条上
弹出时算scrollTop，给内容区fix然后top移动到目前位置，同时body给一个overflow-y:scroll强撑出滚动条

function unScroll() {
    var top = $(document).scrollTop();
    $(document).on('scroll.unable',function (e) {
        $(document).scrollTop(top);
    })
}
function removeUnScroll() {
    $(document).unbind("scroll.unable");
}
// 1 scroll/mousewheel
handler = (event) -> event.preventDefault()
document.body.addEventListener('mousewheel', handler)
setTimeout(()=>document.body.removeEventListener('mousewheel', handler), 4000)

//0 页面滚动条消失，页面大小会变
$('body').css('overflow','hidden');

//**********************  Start with disable/enable scroll function  **********************
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36

var keys = [37, 38, 39, 40];

function preventDefault(e) {
    e = e || window.event;
    if (e.preventDefault)
        e.preventDefault();
    e.returnValue = false;
}

function keydown(e) {
    for (var i = keys.length; i--;) {
        if (e.keyCode === keys[i]) {
            preventDefault(e);
            return;
        }
    }
}

function wheel(e) {
    preventDefault(e);
}

function disable_scroll() {
    if (window.addEventListener) {
        window.addEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = wheel;
    document.onkeydown = keydown;
}

function enable_scroll() {
    if (window.removeEventListener) {
        window.removeEventListener('DOMMouseScroll', wheel, false);
    }
    window.onmousewheel = document.onmousewheel = document.onkeydown = null;
}